<template>
	<view class="orderpage">
		<view class="card">
			<view class="film-box">
				<view class="film-info">
					<view class="film-name">
						{{OrederData.itemName}} -{{OrederData.name}}
					</view>
					<view class="film-original">
						{{OrederData.facePrice}}
					</view>
					<view class="film-price">
						￥{{OrederData.salePrice}}
					</view>
				</view>
				<view class="film-img">
						<img class="loaded" :src="OrederData.icon" alt="" />
				</view>
			</view>
		</view>
		<!-- 充值账号 -->
		<view class="card">
			<view class="card-input">
					<uni-easyinput errorMessage v-model="inputvalue1" focus placeholder="充值账号" ></uni-easyinput>
			</view>
			<view class="card-input">
					<uni-easyinput errorMessage v-model="inputvalue2" focus placeholder="确认账号" @change="hendleNotarize"></uni-easyinput>
			</view>
		</view>
		
		<!-- 详情展示 -->
		<view class="card">
			<view class="title">
				详情展示
			</view>
			<view class="" v-html="OrederData.instructions">
				
			</view>
		</view>
		
		<!-- 底部tab栏 -->
		<view class="placeholder" ></view>
		<view class="pay-box">
			<view class="pay-boottom">
				<view class="pay-total">
					￥{{OrederData.salePrice}}
				</view>
					<button class="pay-btn" size="mini" type="primary" @click="hendlePay">支付</button>
			</view>
		</view>
		
		
		<!-- 自定义弹框 -->
		<!-- 弹框 -->
		 <uni-popup ref="popup" type="center"  before-close="true">
		      <view class="pop">
		        <view class="title"> 服务协议和隐私政策  </view>
		        <view class="tip-info">
					  <!-- <view class="">  <span>{{content}}</span> </view> -->
					  <view class="">
						  <span>阅读</span>
					  </view>
		        </view>
				<view class="sure">
					<view class="" @click="cancal"> 取消	</view>        
					<view class="" @click="ok"> 确认</view>
				</view>
		      </view>
		    </uni-popup>
		
	</view>
</template>
<script setup>
	import {ref,reactive,computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { goodsOrder } from '@/common/js/api.js'
	const app = getApp()

	const inputvalue1 = ref('')
	const inputvalue2 = ref('')
	onLoad((options)=>{
		handergods(options.id)
	})
	
	const OrederData =ref([])
	const handergods=(id)=>{
		goodsOrder({id}).then((res)=>{
				OrederData.value = res.data
		})
	}
	
	// 验证输入账号是否一致
	const hendleNotarize =()=>{
		console.log('>')
		if(inputvalue1.value != inputvalue2.value)	return uni.showToast({
				title:'账号不一致',
				icon:'none',
				duration:1000
			})
		
	}
	
	// 自定义弹框
	const status = ref(false)
	const popup =ref()
	const hendlePay =() =>{
		// 打开弹框
		status.value = !status.value;
		popup.value.open('center')
		console.log('red');
	}
	
	const cancal=()=>{
		popup.value.close()
	}
	const ok=()=>{
		popup.value.close()
		status.value ==true
		console.log('>')
	}
	
	
	// const hendlePay=()=>{
	// 	console.log('？')
	// }
	
	
	
</script>
<style scoped  lang="scss">
	.orderpage{
		background-color: #f1f1f1;
	}
	.card{
		    background-color: #fff;
		    margin: 20rpx 24rpx;
		    border-radius: 20rpx;
		    padding: 36rpx 24rpx;
			// 产品
			.film-box{
				    display: -webkit-box;
				    display: -webkit-flex;
				    display: flex;
					    justify-content: space-between;
				.film-info{
					    flex: 1;
					    display: -webkit-box;
					    display: -webkit-flex;
					    display: flex;

					    justify-content: space-between;
				
					    flex-direction: column;
					.film-name{
						    font-weight: 800;
						    font-size: 32rpx;
					}
					.film-original{
						    font-size: 24rpx;
						    font-weight: 400;
						    color: #999999;
						    text-decoration: line-through;
					}
					.film-price{
						    color: #EA1D62;
						    font-size: 36rpx;
						    font-weight: bold;
					}
				}
				.film-img{
					width: 160rpx;
					height: 160rpx;
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					justify-content: center;
					.loaded{
						max-width: 100%;
						max-height: 100%;	
					}
				}
			}
			
			// 账号
			.card-input{
				    margin-top: 20rpx;
			}
			
			// 详情展示
			.title{
				    font-size: 32rpx;
				    font-weight: 800;
			}
	}
	
	.placeholder{
		height:210rpx ;
	}
	.pay-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 20rpx 24rpx;
		.pay-boottom{
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			.pay-total{
					flex: 1;
					color: #EA1D62;
					font-size: 40rpx;
			}
			.pay-btn{
				background: #EA1D62;
				color: #fff;
				border-radius: 40rpx;
				width: 200rpx;
				height: 80rpx;
					line-height: 80rpx;
					font-size: 34rpx;
					font-weight: normal;
			}
		}
	}
		
		
		
		
		
		
		
		
		
	// 弹框
		.pop {
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-50%);
		    background-color: #fff;
		    border-radius: 16rpx;
		    height: 500rpx;
		    z-index: 99;
		    width: 560rpx;
		    padding: 40rpx 0;
		  }
		  .title {
		    text-align: center;
		    font-size: 28rpx;
		    font-weight: 500;
		    // margin-top: 38rpx;
		  }
	
	
		  .tip-info {
		    padding: 0 30rpx;
		    font-size: 28rpx;
		    color: #666;
		    margin-top: 20rpx;
		    margin-bottom: 34rpx;
		    text-align: center;
			text-align: left;
		  }
		  .sure {
		    width: 100%;
		    border-top: 1rpx solid #d1d1d1;
		    height: 112rpx;
		    text-align: center;
		    line-height: 112rpx;
		    color: #02A53C;
		    font-size: 34rpx;
		    font-weight: 500;
			display: flex;
			    justify-content: space-around;
		  }
		  .blue{
			  color: #007aff;
		  }
	
		
	
</style>
